<style lang="scss">

</style>

<template>
  <div class="page-home">
    <z-space vertical>
      <z-search-table :def="dataTable"></z-search-table>
      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import {useDataTable} from "@/zpkgs/hooks/datatable";
import VueCodeMirror from "@example/components/VueCodeMirror";

export default {
  components: {VueCodeMirror},
  setup(props, ctx) {

  function init() {
    return useDataTable({
      defaultUrl: '/api/list2',
      request: globalThis.Req,
      columns:[
        {
          label: '源数据库名',
          prop: 'sourceDbName',
        },
        {
          label: '源数据库表',
          prop: 'sourceTable',
          search: {
            type: 'string',
            ui: {widget: 'CusInput'}
          }
        },
        {
          label: '目标数据库名',
          prop: 'targetDbName'
        },
        {
          label: '目标数据库表',
          prop: 'targetTable',
        },
      ],
      search: {
        slots: {
          object_beforeend: `
<z-space style="margin-left: 10px;">
<el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>
</z-space>
`
        },
        def: {
          properties: {
            sourceDbName: {
              type: 'string',
              ui: {widget: 'CusInput', label: '源数据库名', widgetConfig: {}},
              rules: [],
            },
          },
        }
      }
    });
  }


    // let js = init.toString().replace(`function init()`, '')

    let def = {
      tpl: `<template>
   <search-table :def="dataTable"></search-table>
</template>`,
      js: `
useDataTable({
  defaultUrl: '/api/list',
  request: globalThis.Req,
  columns:[
    {
      label: '源数据库名',
      prop: 'sourceDbName'
    },
    {
      label: '源数据库表',
      prop: 'sourceTable'
    },
    {
      label: '目标数据库名',
      prop: 'targetDbName'
    },
    {
      label: '目标数据库表',
      prop: 'targetTable',
    },
  ],
  search: {
    slots: {
      object_beforeend: \`
<z-space style="margin-left: 10px;">
<el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>
</z-space>
\`
    },
    def: {
      properties: {
        name: {
          type: 'string',
          ui: {widget: 'CusInput', label: '单行文本', widgetConfig: {}},
          rules: [],
        },
      },
    }
  }
});
    `
    }

    let dataTable = init()
    return {
      def,
      dataTable
    }
  }
}
</script>
